<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { updataProductList } from '@/store/product';
import * as productAPI from '@/api/product';
import { FormRules } from 'element-plus/es/tokens/form';
import { FormInstance } from 'element-plus/es/components/form';

const router = useRouter();
const route = useRoute();
const itemId = ref<number>(-1);
const dialogVisible = ref<boolean>(false);

const itemForm = reactive({
  name: '',
});

const itemFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  name: [
    { required: true, message: '请输入项目名', trigger: 'blur' },
  ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid: any, fields: any) => {
    if (valid) {
      productAPI.postProduct(itemForm.name)
        .then((res) => {
          router.push({
            name: 'screen',
            params: {
              id: res.id,
            },
          });
        });
      dialogVisible.value = false;
    }
  });
};

const exampleList: any = updataProductList();
exampleList.updataExample();

function goBack(): void {
  router.go(-1);
}

function onMouseEnter(id: number): void {
  itemId.value = id;
}

function onMouseLeave() {
  itemId.value = -1;
}

function onCreate() {
  dialogVisible.value = true;
}

function onCreateClose() {
  dialogVisible.value = false;
}

</script>

<template>
  <header>
    <div class="right-bar"></div>
    <div class="left-bar"></div>
    <div class="return-btn">
      <span
        class="return-text"
        @click="goBack"
      >
        <el-icon><ArrowLeft /></el-icon>
        <span>取消创建</span>
      </span>
    </div>
  </header>
  <main>
    <div class="template-list">
      <div class="template-item border">
        <div class="template-btn">
          <el-button
            text
            class="create-btn"
            @click="onCreate"
          >
            <el-icon><Plus /></el-icon>
            <span>创建项目</span>
          </el-button>
          <el-dialog
            v-model="dialogVisible"
            title="创建数据大屏"
            width="400px"
          >
            <el-form
              ref="itemFormRef"
              :model="itemForm"
              :rules="rules"
              label-width="auto"
              label-position="top"
            >
              <el-form-item
                label="数据大屏名称"
                prop="name"
              >
                <el-input
                  v-model="itemForm.name"
                  placeholder="请输入大屏名称"
                />
              </el-form-item>
              <el-form-item>
                <el-button @click="onCreateClose">
                  取消
                </el-button>
                <el-button
                  type="primary"
                  @click="submitForm(itemFormRef)"
                >
                  创建
                </el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
        <div class="template-info">空白画板</div>
      </div>
      <div
        v-for="item in exampleList.exampleList"
        :key="item.id"
        :class="{
          'template-item': true,
          'border': item.id === itemId,
        }"
        @mouseenter="onMouseEnter(item.id)"
        @mouseleave="onMouseLeave"
      >
        <div class="avatar">
          <img :src="item.img_url">
          <div
            v-show="item.id === itemId"
            class="mask"
          >
            <button>创建项目</button>
            <button>预览</button>
          </div>
        </div>
        <div class="template-model">
          <div class="template-name">
            {{ item.productName }}
          </div>
          <div class="template-size">
            <p>比例 16:9</p>
            <p>{{ `${item.width}x${item.height}px` }}</p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>
header {
  height: 50px;
  width: 100%;
  position: relative;
  background-color: #151b22;
  overflow: hidden;

  .right-bar {
    position: absolute;
    left: 150px;
    top: 20px;
    height: 5px;
    width: 100%;
    border-top: 1px solid #2681FF;
    border-left: 2px solid #2681FF;
    background: rgba(55,126,255,.04);
    border-top-left-radius: 5px;
    transform: translateX(1px) skewX(-40deg);
    box-shadow: 0 5px 28px 0 rgb(55 126 255 / 28%);
  }

  .left-bar {
    position: absolute;
    left: 0;
    top: 24px;
    height: 25px;
    width: 138px;
    border-right: 2px solid #2681FF;
    border-bottom: 1px solid #2681FF;
    transform: skewX(-45deg);
    border-bottom-right-radius: 5px;
    box-shadow: 0 5px 28px 0 rgb(55 126 255 / 28%);
  }

  .return-btn {
    position: absolute;
    left: -31px;
    top: 0;
    width: 180px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    background: #151b22;
    cursor: pointer;
    transform: skewX(-45deg);
    border-bottom-right-radius: 5px;

    .return-text {
      display: inline-flex;
      align-items: center;
      color: #fff;
      font-size: 14px;
      margin-left: 10px;
      transform: skewX(45deg);
      transition: .2s;

      &>i {
        font-size: 16px;
        margin-right: 5px;
      }
    }

    &:hover .return-text {
      color: #2681FF;
    }
  }
}

main {
  height: 100%;
  padding: 60px 30px 100px 30px;
  background-color: #151b22;
  display: flex;
  justify-content: center;

  .template-list {
    width: 1160px;
    display: flex;
    flex-wrap: wrap;

    .border {
      outline: 1px solid #2681FF !important;
    }

    .template-item {
      width: 258px;
      height: 184px;
      box-shadow: 0 0 10px -6px #000;
      outline: 1px solid #3a4659;
      margin: 16px;
      cursor: default;

      .template-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 146px;
        box-shadow: inset 0 0 46px 0 rgb(136 215 255 / 29%);

        :deep(.el-form-item__content) {
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }

        .create-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 4px 30px;
          background-color: #2681FF;
          border: 1px solid #2681FF;
          font-size: 14px;
          color: #fff;
          cursor: pointer;
        }
      }

      .template-info {
        height: 36px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top: 1px solid #2681FF;
        background-color: #1d262e;
        font-size: 14px;
        color: #fff;
      }

      .avatar {
        height: 146px;
        position: relative;

        img {
          height: 100%;
        }

        .mask {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          &>button:nth-child(1) {
            width: 138px;
            height: 32px;
            background-color: #2681FF;
            border: 1px solid #2681FF;
            font-size: 14px;
            color: #fff;
            cursor: pointer;
          }

          &>button:nth-child(2) {
            width: 138px;
            height: 32px;
            border: 1px solid #2681FF;
            font-size: 14px;
            color: #2681FF;
            margin-top: 10px;
            cursor: pointer;
          }
        }
      }

      .template-model {
        height: 36px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #1d262e;
        box-sizing: border-box;
        font-size: 14px;
        color: #fff;

        .template-size {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }
}
</style>
